{% extends "base.html" %}
{% block title %}OPC模块注册{% endblock %}
{% block head %}
<style type="text/css">

</style>
{% endblock %}
{% block content %}

<div class="align-middle col-12   mb-2 row ">
    <h5 class="h2 d-inline">
        <span class="text-muted ">opc server参数配置</span>
    </h5>
    
</div>
<hr class="border-bottom border-danger" />
<form action="{{url_for('cs.load_opc_se')}}" method="post" id='shen' enctype="multipart/form-data"
    class="needs-validation" novalidate>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    <fieldset disabled id='bj'>
        <div class="form-group row">
            <label for="module" class="col-sm-2 col-form-label col-form-label-md">module_name</label>
            <div class="col-sm-4">
                <select class="form-control form-control-md custom-select" name='module' id="module" required >
                    <option>s_opcda_server1</option>
                    <option>s_opcda_server2</option>
                    <option>s_opcda_server3</option>
                </select>
                <div class="invalid-feedback" style="width: 100%;">
                    module_name is required.
                </div>
            </div>
            <label for="module" class="col-sm-2 col-form-label col-form-label-md">请选择模块名称</label>
        </div>

        <div class="form-group row">
            <label for="enAutoTag" class="col-sm-2 col-form-label col-form-label-md">加点模式</label>
            <div class="col-sm-4">
                <select class="form-control form-control-md custom-select" name='enAutoTag' id="enAutoTag" onchange="show_load()" required>
                    <option>0</option>
                    <option>1</option>
                </select>
                <div class="invalid-feedback" style="width: 100%;">
                    加点模式 is required.
                </div>
            </div>
            <label for="module" class="col-sm-2 col-form-label col-form-label-md">请选择加点模式</label>

        </div>
        <div class="form-group row">
            <label for="isDataConvert" class="col-sm-2 col-form-label col-form-label-md">数据转换</label>
            <div class="col-sm-4">
                <select class="form-control form-control-md custom-select" name='isDataConvert' id="isDataConvert" required>
                    <option>0</option>
                    <option>1</option>
                </select>
            <div class="invalid-feedback" style="width: 100%;">
                数据转换 is required.
            </div>
            </div>

            <label for="module" class="col-sm-2 col-form-label col-form-label-md">请选择是否数据转换</label>

        </div>
        <div class="form-group row" id='load'>
            <label for="file" class="col-sm-1 col-form-label col-form-label-md">上传位号:</label>
            <div class="col-sm-4 offset-1">
                <input type="file" name='file' class="form-control form-control-md" id="file">
            </div>
            <div class="invalid-feedback" style="width: 100%;">
                位号 is required.
            </div>
            <label for="module" class="col-sm-2 col-form-label col-form-label-md">请选择位号上传</label>

        </div>

    </fieldset>


    <div class="form-group row">
        <div class="col-sm-4  offset-2">
            <button type="button" class="btn btn-info btn-block btn-md" id='alter' onclick="edit()">edit</button>
            <button type="submit" class="btn btn-primary d-none btn-block btn-md" id='comm1'
                onclick="save()">save</button>
        </div>
    </div>
</form>


<script>
    var csrftoken = $("meta[name=csrf-token]").attr("content");


    function edit() {
        var module_name = $("#module").val()
        alarms('开始编辑' + module_name)
        $("#alter").addClass("d-none");
        $("#comm1").removeClass("d-none");
        $("#bj").removeAttr("disabled");;

    }

    function save() {
        $("#alter").removeClass("d-none");
        $("#comm1").addClass("d-none");
        $("#bj").addAttr("disabled");
    }


    $(document).ready(function () {
        var module_name = $("#module").val()
        $("#alter").click(function () {
            $.ajax({
                url: "{{url_for('cs.alter_module')}}",
                data: {
                    'module': module_name
                },
                type: 'get',
                dataType: 'json',
                success: success,
                error: function (data) {
                    console.log("请填写完全");
                },
            });
            return false;
        });
    })

    function success(data) {
        console.log(data)
        $('#enAutoTag').val(data.basic_config.enAutoTag)
        $('#isDataConvert').val(data.basic_config.isDataConvert)
    }

    function show_load() {

        var auto = $("#enAutoTag").val()
        if (auto == 0) {
            $("#load").removeClass("d-none");
        } else if (auto == 1) {
            $("#load").addClass("d-none");
        }

    }
    (function () {
        'use strict'

        window.addEventListener('load',
            function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation')

                // Loop over them and prevent submission
                Array.prototype.filter.call(
                    forms,
                    function (form) {
                        form.addEventListener('submit',
                            function (event) {
                                if (form.checkValidity() === false) {
                                    event.preventDefault()
                                    event.stopPropagation()
                                }
                                form.classList.add('was-validated')
                            }, false)
                    })
            }, false)
    }())

</script>
{% endblock %}